<template>
    <view class="app-limit-model">
        <u-popup v-model="show" :zoom="false" mode="center" @close="close">
            <view class="model" @touchmove.stop.prevent>
                <view class="limit-box dir-top-nowrap cross-center">
                    <template v-if="showData && showData.sub_title">
                        <view class="title" v-text="showData.title"></view>
                        <view class="sub-title" v-text="showData.sub_title"></view>
                    </template>
                    <template v-else>
                        <view class="title one" v-text="showData.title">本周发起次数用完</view>
                    </template>
                    <view class="limit-btn main-center cross-center" @click="close">我知道了</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import uPopup from '@/components/basic-component/u-popup/u-popup.vue';

export default {
    name: 'app-limit-model',
    components: {
        uPopup,
    },

    props: {
        showData: Object,
        value: {
            type: [Number, Boolean],
            default: false,
        }
    },
    data() {
        return {
            show: this.value,
        }
    },
    watch: {
        value(newData) {
            this.show = newData;
        }
    },
    methods: {
        close() {
            this.$emit('input', false);
        }
    },
}
</script>

<style scoped lang="scss">
.app-limit-model {
    .model {
        background: #FFFFFF;
        border-radius: #{16rpx};

        .limit-box {
            padding: #{60rpx} #{40rpx};

            .title {
                color: #353535;
                font-size: #{36rpx};
                line-height: 1;
                margin-bottom: #{26rpx};
            }

            .title.one {
                margin-top: #{20rpx};
                margin-bottom: #{30rpx};
            }

            .sub-title {
                color: #999999;
                line-height: 1;
                font-size: #{28rpx};
            }

            .limit-btn {
                margin-top: #{50rpx};
                width: #{520rpx};
                height: #{90rpx};
                color: #FFFFFF;
                border-radius: #{45rpx};
                background: #FF4544;
                font-size: #{32rpx};
            }
        }
    }
}
</style>
